.con {
  position: relative;
}
.info {
  padding: 9px 15px;
  margin-bottom: 12px;
  border-radius: 3px;
  position: absolute;
  top: 12px;
  background-color: white;
  width: auto;
  min-width: 264px;
  border-width: 0;
  right: 12px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  .inputItem {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 36px;
    .inputItemPrepend {
      margin-left: -1px;
      height: 28.39px;
      .inputItemText {
        width: 96px;
        text-align: justify;
        padding: 4.8px 8.4px;
        display: inline-block;
        text-justify: distribute-all-lines;
        text-align-last: justify;
        align-items: center;
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        text-align: center;
        white-space: nowrap;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-radius: 3px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
    }
    .tipinput {
      display: inline-block;
      flex: 1 1 auto;
      background: #fff;
      padding: .375rem 1.75rem .375rem .75rem;
      line-height: 1.5;
      color: #495057;
      vertical-align: middle;
      background-size: 8px 10px;
      border: 1px solid #ced4da;
      border-radius: 3px;
      appearance: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      height: 28.39px;
      outline: 0;
    }
    .list {
      position: absolute;
      right: 0;
      top: 36px;
      z-index: 1024;
      background-color: #fefefe;
      border: 1px solid #d1d1d1;
      width: 200px;
      .listItem {
        white-space: nowrap;
        font-size: 12px;
        cursor: pointer;
        padding: 4px;
      }
    }
  }
}